<template>
    <el-drawer :append-to-body="true" title="请选择商品" :visible.sync="drawerIsShow" size="490px" :with-header="true">
        <div class="p-10 communicate-drawer">
            <div class="list">
                <div class="item2 pull-left o-hidden" v-for="(item,index) in list" :key="index"
                     @click="selectOne(item)">
                    <el-image style="width:140px;height:140px;margin:0;padding:3px;border-bottom:1px solid #ddd;"
                              fit="contain"
                              :src="item.image">
                        <div slot="error" style="width:100%;height:100%;"
                             class="image-slot color-999 font12 flex-center">暂无<br/>图片
                        </div>
                    </el-image>
                    <div class="t-hidden font12 pl-10 pr-10 t-center" style="width:140px;height:30px;line-height:27px;">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="mt-10 t-center">
                <el-pagination @current-change="show()" background layout="prev, pager, next" :page-size="12"
                               :current-page.sync="page" :total="total"></el-pagination>
            </div>
        </div>
    </el-drawer>
</template>

<script type="text/ecmascript-6">
import request from '../common/js/request.js';

export default {
    data() {
        return {
            drawerIsShow: false,
            page: 1,
            list: [],
            total: 0
        }
    },
    created() {
        this.image = this.fromData;
    },
    methods: {
        selectOne(item) {
            this.drawerIsShow = false;
            this.$emit('toData', item.id);
        },
        show() {
            request({
                url: '/manage/goods/list',
                data: {page: this.page, size: 12, type: 3, status: 1}
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
                this.drawerIsShow = true;
            })
        },

    }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.list {
    .item2 {
        border: 1px solid #ddd;
        margin: 0 10px 10px 0;
    }
}
</style>
